<template>
	<!-- 月初计划详情 -->
	<view class="body">
		<myHeader :title="title"></myHeader>
		<view class="mt-5 p-20">
			<view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">名称</view>
					<view class="" style="flex: 0 0 70%">{{planDetail.name}}</view>
				</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">会议主题</view>
					<view class="" style="flex: 0 0 70%;">{{planDetail.theme}}</view>
				</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">状态</view>
					<view class="" style="flex: 0 0 70%;">{{planDetail.statusLabel}}</view>
				</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">会议室</view>
					<view class="" style="flex: 0 0 70%;">{{planDetail.room}}</view>
				</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">开始时间</view>
					<view class="" style="flex: 0 0 70%;">{{planDetail.time}}</view>
				</view>
				<view class="mtb-40" style="display: flex;">
					<view class="text-gray" style="flex: 0 0 30%;">结束时间</view>
					<view class="" style="flex: 0 0 70%;">{{planDetail.endTime}}</view>
				</view>
				<view class="mtb-40">
					<view class="text-gray mtb-20">任务详情</view>
					<view v-if="planDetail.file == undefined">
						<view>暂无信息</view>
					</view>
					<view class="ml-40" v-if="planDetail.file != undefined" style="width: 100upx;height:100upx;">
						<image @click="$api(planDetail.file)" style="width: 100upx;height:100upx;"
							src="/static/party_building/assets/files/files.png"></image>
					</view>
				</view>
				<view class="mtb-40">
					<view class="text-gray mtb-20">任务总结</view>
					<view v-if="planDetail.summaryFile == undefined || planDetail.summaryFile ==null">
						<view class="ml-40">暂无文件</view>
					</view>
					<view class="ml-40" v-if="planDetail.summaryFile != undefined" style="width: 100upx;height:100upx;">
						<image @click="$api(planDetail.summaryFile)" style="width: 100upx;height:100upx;"
							src="/static/party_building/assets/files/files.png"></image>
					</view>
				</view>
			</view>

			<!-- 任务列表 -->
			<view>
				<view class="text-gray mtb-20">任务列表</view>
				<uni-table border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="left">任务</uni-th>
						<uni-th align="left">执行人</uni-th>
						<uni-th align="left">电话</uni-th>
						<uni-th align="left">分数</uni-th>
						<uni-th align="left">状态</uni-th>
						<uni-th align="left" v-if="!currentRoleCode.includes('fl-leader')"></uni-th>
					</uni-tr>
					<uni-tr v-for="(item,index) in taskList" :key="item.id">
						<uni-td>{{item.taskName}}</uni-td>
						<uni-td>{{item.executorName}}</uni-td>
						<uni-td><a :href="'tel://'+item.phone">{{item.phone}}</a></uni-td>
						<uni-td>{{item.taskScore}}</uni-td>
						<uni-td>{{item.statusLabel}}</uni-td>
						<uni-td v-if="! currentRoleCode.includes('fl-leader')">
							<!-- 如果是組長 -->
							<button class="ml-40" v-if="currentRoleCode.includes('fl-group-leader') && item.status==0"
								@click="pageTo1('./addMonthStartTaskScore',planDetail.id, item)">分配</button>
							<!-- 如果是组员 -->
							<button class="ml-40" v-if="currentRoleCode.includes('fl-group-member') && item.status==0"
								@click="pageTo1('./addMonthStartTaskFile',planDetail.id,item)">完成</button>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from '../../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	export default {
		data() {
			return {
				title: ' 月初计划详情',
				planDetail: {
					id: '',
					name: '',
					creator: '',
					status: 0
				},

				btnPattern: {
					buttonColor: '#e20909'
				},
				// 当前用户角色
				currentRoleCode: [],
				taskList: [{

				}],
				// 控制图片是否显示
				ctrlImg: {
					visible: true,
					msg: ""
				},
			}
		},
		onLoad: function(option) {
			this.planDetail = JSON.parse(option.planDetail)
		},
		mounted() {
			this.getLoginUserRoles();
			this.getDetail();
		},
		methods: {
			//  通过id查询详情
			getDetail() {
				if (this.currentRoleCode.includes('fl-leader')) {
					NetWorkTool.POSTFORM(`/api/federation-start-month/getLeaderTasksDetail`, {
						startMonthId: this.planDetail.id
					}, true).then(res => {
						this.taskList = res;
					})
				} else {
					let param = {
						"current": 1,
						"pageSize": 10,
						param:{
							"startMonthId": this.planDetail.id
						}
					}
					NetWorkTool.POST('/api/federation-start-month/getTasks', param, true).then(res => {
						this.taskList = res.records;
					})
				}
			},
			// 获取登录用户角色
			getLoginUserRoles() {
				let _this = this;
				uni.getStorage({
					key: 'user',
					success(e) {
						let arr = [];
						for (let item of e.data.role) {
							if (null != item.roleCode) {
								_this.currentRoleCode.push(item.roleCode)
								if (item.roleCode == 'fl-leader') {
									_this.isLeader = true;
								}
							}
						}
					}
				})
			},
			pageTo(val, id) {
				uni.navigateTo({
					url: val + "?id=" + id
				})
			},
			pageTo1(val, startMonthId, data) {
				console.log(data)
				uni.navigateTo({
					url: val + "?startMonthId=" + startMonthId + "&data=" + JSON.stringify(data)
				})
			},

			imageError: function(e) {
				this.ctrlImg.visible = false;
				this.ctrlImg.msg = '文件获取失败';
				uni.showToast({
					title: '图片获取失败',
					icon: 'none',
					duration: 2000
				});
			}
		},
		components: {
			myHeader
		},
	}
</script>

<style>
	@import url("/static/party_building/assets/style/federation.css");
</style>
